<template>
  <div class="css-module">
    <fieldset>
        <legend>border设计</legend>
        <div class="border-item solid-border">这个是solid内容</div>
        <div class="border-item dashed-border">这个dashed是内容</div>
        <div class="border-item dotted-border">这个dotted是内容</div>
        <div class="border-item double-border">这个double是内容</div>
        <div class="border-item unset-border">这个是unset内容</div>
        <div class="border-item inset-border">这个是inset内容</div>
    </fieldset>
  </div>
</template>

<script>
export default {
  name: 'CssBorder',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.border-item{
  margin: 1em;
  border-color: #000;
  border-width: 3px;
}
.solid-border{
  border-style: solid;
  border-radius: 10px;
  border-width: 20px;
  border-radius: 20px;
}
.dashed-border{
  border-style: dashed;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
.dotted-border{
  border-style: dotted;
}
.double-border{
  border-style: double;

}
.unset-border{
  border-style: unset;
}
.inset-border{
  border-style: inset;
}
</style>
